<template>
    <div>
        <h3>{{viewData.viewTitle}}</h3>
        <div ref="echarts" class="fl echarts" :style="{width:'100%',height:viewData.viewHeight}"></div>
    </div>
</template>
<script>
import {queryApi, fileUpload, fileUploadvideo} from '@/api/api'
export default {
    props:{
        viewData:{
            viewTitle:'',
            viewHeight:0,
            seiveApi:'',
            serachParam:{},
            seriesData:[],
            options:{
                legend:{
                    show:false,//是否显示图例
                    orient:'horizontal',//布局方式，默认水平 'horizontal' ¦ 'vertical'垂直
                    type:'scroll',//图例样式 plain\scroll 普通/可滚动翻页，当图例数量较多时使用
                    left:'center',// left right center 图例显示位置
                    icon:'circle',//图例样式 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' 或图片'image://http://xxx.xxx.xxx/a/b.png'
                    itemWidth:20,//icon宽度
                    itemHeight:20,//icon高度
                    textStyle: {
                        color: '#333'//图例文字颜色
                    },
                    data:[]
                },
                xAxis:{
                    type:"category",
                    axisLabel:{ //x轴样式
                        color:"red",
                        fontSize:''||'12'
                    },
                    data: [],// x轴显示数据
                },
                yAxis: {
                    axisLabel: { //y轴样式
                        color: 'blue',
                        fontSize:''||'12'
                    },
                },
            }
        }   
    },
    data() {
        return {

        };
    },
    methods: {
        init(){
            var echartsNew = this.$echarts.init(this.$refs.echarts);
            echartsNew.clear();
            var seriesData = [];
            if(this.viewData.seiveApi!=''){
                queryApi(this.viewData.serachParam).then(res => {
                    var json = res.data;
                    if(json.code == '000000'){
                        for(var i=0;i<json.seriesData.length;i++){
                            seriesData.push({
                                type: 'bar',
                                name: json.seriesData[i].name,
                                stack: 'total',
                                label: {
                                    show: true
                                },
                                emphasis: {
                                    focus: 'series'
                                },
                                data: json.seriesData[i].data
                            })
                        }
                    }
                })
            }else{
                for(var i=0;i<this.viewData.seriesData.length;i++){
                    seriesData.push({
                        type: 'bar',
                        name: this.viewData.seriesData[i].name,
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.viewData.seriesData[i].data
                    })
                }
            }
            var options = {
                tooltip: {
                    show:false,
                    trigger: 'axis',
                    axisPointer: {            // Use axis to trigger tooltip
                        type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                },
                legend: {
                    show:this.viewData.options.legend.show||true,
                    data: this.viewData.options.legend.data
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: this.viewData.options.xAxis.type ||'category',
                    data: this.viewData.options.xAxis.data || [],
                    axisLabel:{
                        color:this.viewData.options.xAxis.axisLabel.color,
                        fontSize:this.viewData.options.xAxis.axisLabel.fontSize
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color:this.viewData.options.yAxis.axisLabel.color,
                        fontSize:this.viewData.options.yAxis.axisLabel.fontSize
                    },
                },
                series: seriesData
            };
            echartsNew.setOption(options,true);
        }
    },
    mounted(){
        this.init();
    }
}
</script>